<template>
  <div>
    <el-form
      ref="connectionFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="top"
    >   
      <el-form-item label="数据库类型" prop="dbType">
        <el-select
          v-model="formData.dbType"
          placeholder="请选择数据库类型"
          class="input-with-select"
        >
          <el-option label="MySQL" value="mysql" />
          <el-option label="PostgreSQL" value="postgresql" />
          <el-option label="SQL Server" value="sqlserver" />
          <el-option label="Oracle" value="oracle" />
          <el-option label="SQLite" value="sqlite" />
        </el-select>
      </el-form-item>

      <el-form-item label="服务器地址" prop="host">
        <el-input
          v-model="formData.host"
          placeholder="请输入数据库服务器地址"
          class="input-with-select"
        />
      </el-form-item> 

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="port" label="端口">
            <el-input 
              v-model="formData.port" 
              placeholder="请输入端口" 
              type="number"  
              :min="1" 
              :max="65535" 
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item prop="timeout" label="连接超时">
            <el-input 
              v-model="formData.timeout" 
              placeholder="请输入超时时间" 
              type="number" 
              :min="1"
            >
              <template #append>秒</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="数据库名称" prop="database">
        <el-input
          v-model="formData.database"
          placeholder="请输入数据库名称"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="连接池大小" prop="poolSize">
            <el-input 
              v-model="formData.poolSize" 
              placeholder="连接池大小" 
              type="number" 
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字符集" prop="charset">
            <el-select v-model="formData.charset" placeholder="请选择字符集">
              <el-option label="UTF-8" value="utf8" />
              <el-option label="UTF-8 MB4" value="utf8mb4" />
              <el-option label="GBK" value="gbk" />
              <el-option label="Latin1" value="latin1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import {DbConnectionField} from '@/components/DataWorkflow/types/data-collect.ts';

const props = defineProps<{ 
  data: DbConnectionField
}>()

const connectionFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  dbType: [
    { required: true, message: '请选择数据库类型', trigger: 'change' }
  ],
  host: [
    { required: true, message: '请输入数据库服务器地址', trigger: 'blur' },
    { 
      validator: (_, value, callback) => {
        if (!value) {
          callback(new Error('请输入数据库服务器地址'))
        } else if (!/^((https?|ftp)?:\/\/)?[^\s/$.?#].[^\s]*$/i.test(value)) {
          callback(new Error('请输入有效的服务器地址'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  port: [
    { required: true, message: '请输入端口号', trigger: 'blur' }
  ],
  database: [
    { required: true, message: '请输入数据库名称', trigger: 'blur' }
  ],
  timeout: [
    { required: true, message: '请输入连接超时时间', trigger: 'blur' },
    { 
      type: 'number',
      min: 1,
      message: '超时时间必须大于0',
      trigger: 'blur'
    }
  ],
  poolSize: [
    { 
      type: 'number',
      min: 1,
      message: '连接池大小必须大于0',
      trigger: 'blur'
    }
  ]
})

const formData = ref<DbConnectionField>({ 
  dbType: 'mysql',
  host: '',
  port: 3306,
  database: '',
  timeout: 30,
  poolSize: 5,
  charset: 'utf8',
  ...props.data 
})

watch(() => props.data, (val: DbConnectionField) => {
  formData.value = { ...formData.value, ...val }
}, { immediate: true, deep: true })

const validate = async (): Promise<boolean> => {
  if (!connectionFormRef.value) return false
  try {
    await connectionFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

const getData = (): DbConnectionField => {
  return formData.value
}

defineExpose({
  validate,
  getData
})
</script>

<style scoped>
.input-with-select {
  width: 100%;
}
</style>